<template>
  <div class="list bg-white px-3 mb-0">
    <buttonSearch  
        placeholder="要搜索的商品名称"
        @search="searchEvent"
        @superSearchEvent="searchEvent"
        ref="buttonSearch" 
        class="pt-3">
      <template #left>
        <!-- 左边按钮 -->
        <el-button type="danger" size="mini" @click="delAll">批量删除</el-button>
      </template>
      <template #form>
            <el-form :inline="true">
              <el-form-item label="评价用户:" class="mb-0">
                <el-input
                  placeholder="评价用户"
                  size="mini"
                  v-model="form.username"
                ></el-input>
              </el-form-item>
              <br />
              <el-form-item label="商品类型:" class="mb-0">
                <el-select
                  v-model="form.type"
                  placeholder="请选择商品类型"
                  size="mini"
                >
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发布时间:" class="mb-0">
                <div class="block">
                    <span class="demonstration">默认</span>
                    <el-date-picker
                    v-model="form.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="small">
                    </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item class="mb-0">
                <el-button type="info" size="mini" @click="searchEvent"
                  >搜索</el-button
                >
                <el-button size="mini" @click="clearSearch"
                  >清空搜索条件</el-button
                >
              </el-form-item>
            </el-form>
          </template>
    </buttonSearch>
    <!-- 商品列表 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 20px; margin-bottom: 60px"
      border ref="multipleTable" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45" align="center" 
      @selection-change="handleSelectionChange">
      </el-table-column>
      <el-table-column type="expand">
        <template>
            <div class="media">
                <img src="../../../../public/demo66.jpg" style="width:70px;heigth:70px;border-radius:50%;" class="mr-3">
                <div class="media-body">
                    <h6 class="mt-0 d-flex">用户名1
                        <small class="ml-2">2021-12-11 18:00:00</small>
                        <el-button class="ml-auto" type="danger" size="mini">删除</el-button>
                    </h6>
                    <p>评论内容</p>

                    <div class="media mt-3">
                    <a class="mr-3" href="#">
                        <img src="../../../../public/demo66.jpg" style="width:70px;heigth:70px;border-radius:50%;" class="mr-3">
                    </a>
                    <div class="media-body">
                        <h6 class="mt-0 d-flex">客服
                        <small class="ml-2">2021-12-11 18:00:00</small>
                        <el-button class="ml-auto" type="danger" size="mini">删除</el-button>
                    </h6>
                        <p>回复内容</p>
                    </div>
                    </div>
                </div>
                </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="80" align="center">
      </el-table-column>
      <el-table-column label="商品" align="center" width="180">
        <template v-slot="scope">
            <div class="media">
                <img :src="scope.row.goods.cover" style="height:60px;width:60px;"/>
                <div class="media-body">
                    <h6 class="mt-0">{{ scope.row.goods.title }}</h6>
                </div>
            </div>
        </template>
      </el-table-column>
      <el-table-column prop="order" label="评价信息" width="360">
          <template v-slot='scope'>
           <div class="d-flex flex-column">
               <p>用户名：{{scope.row.username}}</p>
               <p>评分：
                   <el-rate
                    v-model="scope.row.star"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
                    </el-rate>
               </p>
           </div>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="评价时间" align="center" width="180">
      </el-table-column>
      <el-table-column label="是否显示" align="center">
        <template v-slot='scope'>
          <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-footer class="d-flex align-items-center p-0 border-top position-fixed elFoot">
      <div class="pl-2">
        <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
      </div>
    </el-footer>
  </div>
</template>
<script>
import buttonSearch from "@/components/common/button-search";
export default {
  name: "list",
  data() {
    return {
        form: {
          username: "",
          type: "",
          time: "",
      },
      superSearch: false,
      //   商品类型
      options: ["区域一", "区域二"],
      // 商品列表数据
      tableData: [
        {
          id: 1,
          username: '用户名',
          goods: {
            title:'手机商品',
            cover: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F11%2F3%2F59feb3aa-4250-4f5d-acb5-cb2efb635b17.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641790508&t=18e8472c78aa51569713d987a1a4886a"
          },
          star:3,
          order: 50,
          status: 1,
          create_time: "2021-12-11 18:00:00"
        },
      ],
      multipleSelection: [],
      currentPage: 1,
      dialogVisible: false
    };
  },
  components: {
    buttonSearch,
  },
  filters: {
    getValue(val) {
      let str = val.map((v) => v.name);
      return str.join(","); // 数组转为字符串
    },
  },
  created() {},
  computed: {},
  watch: {},
  methods: {
      clearSearch() {},
    searchEvent(e) {
        console.log(e);
    },
    // 批量删除
    delAll() {
      if (this.multipleSelection.length === 0) {
        return this.$message({
          message: "未选择删除项",
          type: "info",
        });
      }
      this.$confirm("是否批量删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.multipleSelection.forEach((item1) => {
            let index = this.tableData.findIndex(
              (item2) => item2.id === item1.id
            );
            if (index !== -1) {
              this.tableData.splice(index, 1);
            }
            this.multipleSelection = [];
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="less" scoped>
li {
  list-style: none;
}
.list {
  margin: -20px;
  margin-top: -8px;
  background-color: white;
}
.elFoot {
  width: 100%;
  bottom: 0;
  background-color: white;
  z-index: 10;
}
/deep/.el-dialog__body {
  padding: 15px 20px;
}
.skulist {
  width: 50px;
}
.skulist:hover {
  cursor: pointer;
  background-color: #f4f4f4;
}
.skulist > i {
  display: none;
}
.skulist:hover > font {
  display: none;
}
.skulist:hover > i {
  display: inline-block;
}
</style>
